<template>
  <div class="app-header">
    <!-- 顶部工具栏 -->
    <div class="top-toolbar">
      <div class="toolbar-content">
        <div class="left-links">
          <NuxtLink to="/" class="nav-link join-link" data-tooltip="首页导航，平台首页">
            <i class="fas fa-home"></i>
            <span>首页</span>
            <div class="join-description">
              <div class="desc-title">平台首页</div>
              <div class="desc-content">
                <p>• 最新产品展示</p>
                <p>• 热门分类推荐</p>
                <p>• 行业资讯动态</p>
                <p>• 平台服务介绍</p>
              </div>
            </div>
          </NuxtLink>
          <NuxtLink to="/join/base" class="nav-link join-link" data-tooltip="专业基地认证，品质保障">
            <i class="fas fa-seedling"></i>
            <span>基地加入</span>
            <div class="join-description">
              <div class="desc-title">专业基地认证</div>
              <div class="desc-content">
                <p>• 标准化种植基地认证</p>
                <p>• 品质检测与溯源体系</p>
                <p>• 专业技术指导支持</p>
                <p>• 优先采购合作机会</p>
              </div>
            </div>
          </NuxtLink>
          <NuxtLink to="/join/farmer" class="nav-link join-link" data-tooltip="农户直供，新鲜直达">
            <i class="fas fa-user-friends"></i>
            <span>农户加入</span>
            <div class="join-description">
              <div class="desc-title">农户直供平台</div>
              <div class="desc-content">
                <p>• 农户直供，减少中间环节</p>
                <p>• 新鲜农产品直达消费者</p>
                <p>• 技术支持与培训服务</p>
                <p>• 稳定销售渠道保障</p>
              </div>
            </div>
          </NuxtLink>
          <NuxtLink to="/join/factory" class="nav-link join-link" data-tooltip="工厂合作，规模采购">
            <i class="fas fa-industry"></i>
            <span>工厂加入</span>
            <div class="join-description">
              <div class="desc-title">工厂合作平台</div>
              <div class="desc-content">
                <p>• 规模化采购合作</p>
                <p>• 深加工产品开发</p>
                <p>• 供应链金融支持</p>
                <p>• 品牌推广与营销</p>
              </div>
            </div>
          </NuxtLink>
          <NuxtLink to="/seller" class="nav-link join-link" data-tooltip="商家入驻，品牌推广">
            <i class="fas fa-store"></i>
            <span>商家入驻</span>
            <div class="join-description">
              <div class="desc-title">商家入驻平台</div>
              <div class="desc-content">
                <p>• 品牌商家认证入驻</p>
                <p>• 专业店铺装修服务</p>
                <p>• 营销推广工具支持</p>
                <p>• 数据分析与运营指导</p>
              </div>
            </div>
          </NuxtLink>
        </div>
        
        <div class="right-links">
          <NuxtLink to="/login">你好，请登录</NuxtLink>
          <span class="separator">|</span>
          <NuxtLink to="/register">免费注册</NuxtLink>
          <span class="separator">|</span>
          <NuxtLink to="/orders">我的订单</NuxtLink>
          <span class="separator">|</span>
          <NuxtLink to="/account">个人中心</NuxtLink>
          <span class="separator">|</span>
          <NuxtLink to="/help">帮助中心</NuxtLink>
          <span class="separator">|</span>
          <span class="phone">
            <i class="fas fa-phone-alt"></i>
            客服：400-888-8888
          </span>
        </div>
      </div>
    </div>

    <!-- 搜索栏 -->
    <div class="search-bar">
      <div class="search-content">
        <!-- Logo -->
        <div class="logo-section">
          <NuxtLink to="/" class="logo-link">
            <img src="/logo.png" alt="昌欣菌业" class="logo-img" />
            <div class="logo-text">
              <h1 class="title-main">华中食用菌线上交易平台</h1>
              <p class="title-subtitle">智慧供应链，创造产业新未来</p>
            </div>
          </NuxtLink>
        </div>

        <!-- 搜索框 -->
        <div class="search-box-wrapper">
          <div class="search-box-container">
            <input 
              type="text" 
              v-model="searchKeyword"
              placeholder="搜索商品名称、产地、分类..." 
              class="search-input"
              @keyup.enter="handleSearch"
            />
            <button class="search-btn" @click="handleSearch">
              <i class="fas fa-search"></i>
              搜索
            </button>
          </div>
          <!-- 热门搜索标签 -->
          <div class="hot-tags">
            <a href="/products?type=肉门">肉门</a>
            <a href="/products?type=香菇">香菇</a>
            <a href="/products?type=木耳">木耳</a>
            <a href="/products?type=平菇">平菇</a>
            <a href="/products?type=猴头菇">猴头菇</a>
            <a href="/products?type=茶树菇">茶树菇</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const searchType = ref('product')
const searchKeyword = ref('')
const cartCount = ref(0)

const handleSearch = () => {
  if (!searchKeyword.value.trim()) return
  
  navigateTo({
    path: '/search',
    query: {
      type: searchType.value,
      keyword: searchKeyword.value
    }
  })
}
</script>

<style lang="scss" scoped>
.app-header {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  
  .top-toolbar {
    background: #f5f5f5;
    border-bottom: 1px solid #e5e5e5;
    
    .toolbar-content {
      @include container-width;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      font-size: 12px;
      
      .left-links {
        display: flex;
        gap: 15px;
        white-space: nowrap;
        
        .nav-link {
          color: #e4393c;
          text-decoration: none;
          font-weight: 600;
          transition: all 0.3s;
          white-space: nowrap;
          position: relative;
          
          &:hover {
            color: darken(#e4393c, 10%);
          }
          
          &.join-link {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 8px;
            border-radius: 4px;
            background: linear-gradient(135deg, #f5f5f5 0%, #f0f0f0 100%);
            border: 1px solid transparent;
            position: relative;
            overflow: hidden;
            
            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(90deg, transparent, rgba(228, 57, 60, 0.1), transparent);
              transition: left 0.5s;
            }
            
            &:hover {
              background: linear-gradient(135deg, #e4393c 0%, #d32f2f 100%);
              color: #fff;
              border-color: #e4393c;
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(228, 57, 60, 0.3);
              
              &::before {
                left: 100%;
              }
              
              i {
                transform: scale(1.1);
                animation: bounce 0.6s ease;
              }
            }
            
            i {
              font-size: 14px;
              transition: all 0.3s ease;
            }
            
            span {
              font-size: 12px;
              font-weight: 600;
            }
            
            // 详细说明卡片
            .join-description {
              position: absolute;
              bottom: -200px;
              left: 50%;
              transform: translateX(-50%);
              width: 280px;
              background: #fff;
              border-radius: 8px;
              box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
              border: 1px solid #e0e0e0;
              opacity: 0;
              visibility: hidden;
              transition: all 0.3s ease;
              z-index: 1000;
              pointer-events: none;
              overflow: hidden;
              
              &::before {
                content: '';
                position: absolute;
                top: -8px;
                left: 50%;
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-bottom: 8px solid #fff;
              }
              
              .desc-title {
                background: linear-gradient(135deg, #e4393c 0%, #d32f2f 100%);
                color: #fff;
                padding: 12px 16px;
                font-size: 14px;
                font-weight: 600;
                text-align: center;
                margin: 0;
              }
              
              .desc-content {
                padding: 16px;
                
                p {
                  margin: 0 0 8px;
                  font-size: 12px;
                  color: #666;
                  line-height: 1.5;
                  
                  &:last-child {
                    margin-bottom: 0;
                  }
                }
              }
            }
            
            &:hover .join-description {
              opacity: 1;
              visibility: visible;
              transform: translateX(-50%) translateY(-10px);
            }
          }
        }
      }
      
      .right-links {
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        
        a {
          color: #666;
          text-decoration: none;
          transition: all 0.3s;
          white-space: nowrap;
          
          &:hover {
            color: #e4393c;
          }
        }
        
        .separator {
          color: #ccc;
        }
        
        .phone {
          color: #666;
          margin-left: 5px;
          
          i {
            color: #e4393c;
            margin-right: 4px;
          }
        }
      }
    }
  }
  
  .search-bar {
    padding: 20px 0;
    
    .search-content {
      @include container-width;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 30px;
      
      .logo-section {
        flex-shrink: 0;
        
            .logo-link {
              display: flex;
              align-items: center;
              text-decoration: none;
              gap: 0px;
              margin: 0;
              padding: 0;
          
          .logo-img {
            height: 50px;
            width: auto;
            flex-shrink: 0;
            margin: 0;
            padding: 0;
            margin-right: -30px;
          }
          
          .logo-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin: 0;
            padding: 0;
            
            .title-main {
              margin: 0;
              font-size: 24px;
              color: #333;
              font-weight: 700;
              line-height: 1.3;
              letter-spacing: 0.5px;
            }
            
            .title-subtitle {
              margin: 5px 0 0;
              font-size: 12px;
              color: #999;
              font-weight: 400;
              letter-spacing: 0.5px;
            }
          }
        }
      }
      
          .search-box-wrapper {
            flex: 0 0 600px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 0 auto;
        
        .search-box-container {
          position: relative;
          width: 100%;
          
          .search-input {
            width: 100%;
            height: 40px;
            border: 2px solid #e4393c;
            border-radius: 4px;
            padding: 0 110px 0 15px;
            font-size: 14px;
            outline: none;
            
            &::placeholder {
              color: #ccc;
            }
          }
          
          .search-btn {
            position: absolute;
            right: 0;
            top: 0;
            height: 40px;
            width: 100px;
            background: #e4393c;
            border: none;
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            border-radius: 0 4px 4px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            transition: all 0.3s;
            
            i {
              font-size: 14px;
            }
            
            &:hover {
              background: darken(#e4393c, 10%);
            }
          }
        }
        
        .hot-tags {
          display: flex;
          align-items: center;
          gap: 15px;
          font-size: 13px;
          
          a {
            color: #666;
            text-decoration: none;
            transition: all 0.3s;
            
            &:hover {
              color: #e4393c;
            }
          }
        }
      }
    }
  }
}

// 弹跳动画
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: scale(1.1) translateY(0);
  }
  40% {
    transform: scale(1.1) translateY(-3px);
  }
  60% {
    transform: scale(1.1) translateY(-2px);
  }
}
</style>
